<script setup>
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const viewData = ref([]);
const para = ref({
    time:[],
    beginTime:null,
    endTime:null,
    time2:[],
    beginTime2:null,
    endTime2:null
});

const obj = ref({
    applicationId: null,
    num:null,
    employeeName:null,
    departmentName:null,
    postName:null,
    beginTime:null,
    endTime:null,
    reason:null,
    state:null,
    auditorId: null,
    auditorName:null,
    details: '无'
});

const selectobj = () => {
    getList();
};

const showDialog = ref(false);
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});

let getList = () => {
    axios({
        method: "POST",
        url: `/api/travelApplication/list`,
        data: {
            beginTime : (para.value.time && para.value.time.length > 0)? para.value.time[0] : null,
            endTime :(para.value.time && para.value.time.length > 1)? para.value.time[1] : null,
            beginTime2 : (para.value.time2 && para.value.time2.length > 0)? para.value.time2[0] : null,
            endTime2 :(para.value.time2 && para.value.time2.length > 1)? para.value.time2[1] : null,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            viewData.value = resp.data.data.list;
            viewData.value.forEach(e => {
                switch (e.state) {
                    case 0:
                    e.state = '申请中';
                        break;
                    case 1:
                    e.state = '申请成功';
                        break;
                    case 2:
                    e.state = '申请失败';
                        break;
                    default:
                    e.state = '已撤销';
                }
            });
            pageInfo.total = resp.data.data.count ? resp.data.data.count : 0;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

const handleOk = (row) => {
    obj.value.applicationId = row.id;
    obj.value.details = row.details;
    obj.value.state = 1;

    showDialog.value = true;
};

const handleNo = (row) => {
    obj.value.applicationId = row.id;
    obj.value.details = row.details;
    obj.value.state = 2;
    showDialog.value = true;
};


const submitData = () => {
    const axiosPara = {
        data: obj.value
    };

    axiosPara.method = "POST";
    axiosPara.url = "/api/travelRecord/add";

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            showDialog.value = false;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

onMounted(() => {
    getList();
});
</script>

<template>
    <header class="header">
        <div class="wrapper">
            <div class="s-block">
                    <span class="s-demonstration">起始时间</span>
                    <el-date-picker v-model="para.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                        placeholder="Select date and time" size="small" />
                </div>
                <div class="s-block">
                    <span class="s-demonstration">结束时间</span>
                    <el-date-picker v-model="para.time2" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                        placeholder="Select date and time" size="small" />
                </div>
        </div>
        <div class="w-button">
            <el-button @click="selectobj">查询</el-button>
        </div>
    </header>
    <main>
        <el-table :data="viewData">
            <el-table-column prop="num" label="员工编号"></el-table-column>
            <el-table-column prop="employeeName" label="员工姓名"></el-table-column>
            <el-table-column prop="departmentName" label="部门"></el-table-column>
            <el-table-column prop="postName" label="职务"></el-table-column>
            <el-table-column prop="beginTime" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
            <el-table-column prop="reason" label="原因"></el-table-column>
            <el-table-column label="审批">
                <template #default="scope">
                    <el-button size="small" @click="handleOk(scope.row)">同意</el-button>
                    <el-button size="small" type="danger" @click="handleNo(scope.row)">否决</el-button>
                </template>
            </el-table-column>
        </el-table>
    </main>
    <footer>
        <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            @size-change="getList" @current-change="getList" />

    </footer>
    <el-dialog v-model="showDialog">
        <div>
            <span>详情:</span>
            <el-input v-model="obj.details"></el-input>
        </div>
        <el-button @click="submitData">提交</el-button>
</el-dialog>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.wrapper>div {
    display: flex;
    flex-direction: row;
    margin-right: 1vw;
    gap: 0.5vw;
}

.wrapper>div>span {
    flex: 0 0 auto;
    /* flex-basis: auto; */
    /* flex-shrink: 0; */
}

.w-button {
    display: flex;
    flex-direction: row;
}

.w-button>button {
    margin-right: 1vw;
}
</style>